<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  <title>Document</title>
  <link rel="stylesheet" href="css/todolist.css">
</head>

<body>
  <div class="mode-switch">
    <div>切换模式</div>
    <div class="toggle">
      <div class="circle"></div>
    </div>
  </div>
  <h1 class="h">基本信息</h1>
  <form class="info">
    <input type="text" placeholder="姓名" class="uname">
    <input type="text" placeholder="性别" class="gender">
    <input type="text" placeholder="年龄" class="age">
    <input type="month" placeholder="出生日期" class="birth">
    <input type="text" placeholder="所在城市" class="address">
    <input type="text" placeholder="从事行业" class="work">
    <input type="submit" value="添加" class="add">
  </form>
  <table class="tb">
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>出生日期</th>
        <th>所在城市</th>
        <th>从事行业</th>
        <th>操作一</th>
        <th>操作二</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>张三</td>
        <td>男</td>
        <td>20</td>
        <td>1999.9.19</td>
        <td>上海</td>
        <td>IT</td>
        <td><a href="">删除</a></td>
      </tr> -->
    </tbody>
  </table>
  <script>
    /* const initdata = [{
      uname: "张三",
      gender: "男",
      age: "20",
      birth: "1999.9.19",
      address: "上海",
      work: "IT",
    }] */
    // localStorage.setItem("data", JSON.stringify(initdata))
    //渲染页面
    const arr = JSON.parse(localStorage.getItem("data")) || []
    const tbody = document.querySelector("tbody")
    // console.log(arr);
    function render() {
      const trArr = arr.map(function (ele, index) {
        return `
        <tr>
          <td>${ele.uname}</td>
          <td>${ele.gender}</td>
          <td>${ele.age}</td>
          <td>${ele.birth}</td>
          <td>${ele.address}</td>
          <td>${ele.work}</td>
          <td><a href="" data-id=${index}>删除</a></td>
          <td><button data-name=${index} class="btn">编辑</button></td>
        </tr>
        `
      })
      // console.log(trArr);
      tbody.innerHTML = trArr.join("")
    }
    render()
    //录入模块
    const info = document.querySelector(".info")
    const uname = document.querySelector(".uname")
    const gender = document.querySelector(".gender")
    const age = document.querySelector(".age")
    const birth = document.querySelector(".birth")
    const address = document.querySelector(".address")
    const work = document.querySelector(".work")
    const btn = document.querySelector(".btn")
    // console.dir(btn.tagName);
    info.addEventListener("submit", function (e) {
      e.preventDefault()
      if (!uname.value || !gender.value || !age.value || !birth.value || !address.value || !work.value) {
        return alert("信息有空")
      }
      arr.push(
        {
          uname: uname.value,
          gender: gender.value,
          age: age.value,
          birth: birth.value,
          address: address.value,
          work: work.value,
        }
      )
      render()
      info.reset()
      localStorage.setItem("data", JSON.stringify(arr))
    })
    //删除模块
    tbody.addEventListener("click", function (e) {
      if (e.target.tagName === "A") {
        // alert(11)
        // console.log(e.target.dataset.id);
        arr.splice(e.target.dataset.id, 1)
        render()
        localStorage.setItem("data", JSON.stringify(arr))
      }
      //编辑模块
      if (e.target.tagName === "BUTTON") {
        // alert(11)
        // console.log(e.target.dataset.name);
        // console.log(arr[e.target.dataset.name]);
        // console.log(prompt("请输入你的姓名："));
        const edit_uname = prompt("请输入你的姓名：")
        const edit_gender = prompt("请输入你的性别：")
        const edit_age = prompt("请输入你的年龄：")
        const edit_birth = prompt("请输入你的出生年月：")
        const edit_address = prompt("请输入你的地址：")
        const edit_work = prompt("请输入你的工作：")
        arr[e.target.dataset.name] = {
          uname: edit_uname,
          gender: edit_gender,
          age: edit_age,
          birth: edit_birth,
          address: edit_address,
          work: edit_work,
        }
        render()
        localStorage.setItem("data", JSON.stringify(arr))
      }
    })

    //日夜（间）切换模块
    const toggle = document.querySelector(".toggle")
    const body = document.querySelector("body")
    toggle.addEventListener("click", function () {
      body.classList.toggle("dark-mode")
    })
    //鼠标悬停颜色切换
    const colors = ['#ff0000', '#ffff00', '#00ffff', '#00ff00'];
    tbody.addEventListener("mouseenter", function (e) {
      this.style.backgroundColor = colors[0]
      let firstcolor = colors.shift()
      colors.push(firstcolor)
      // console.log(colors);
    })
    tbody.addEventListener("mouseleave", function () {
      this.style.backgroundColor = ""
    })
  </script>
</body>

</html>